<template>
	<!-- 接口调用失败 -->
	<view class="login">
		<view class="topbar">
			<text class="back" @tap="goback()"> < </text>
		</view>
		<view class="content">
			<!-- 主体表单 -->
			<view class="main">
				<view class="name">
					<input type="text" v-model="username"></input>
				</view>
				<view class="oldpsd">
					<input type="password" v-model="oldpsd"></input>
				</view>
				<view class="newpsd">
					<input type="password" v-model="newpsd"></input>
				</view>
			</view>		
			<button @tap="modify">确认修改</button>
		</view>
	</view>
</template>

<script>
	import { updatePwd } from '../../../api/login/login.js'
	export default {
		data() {
			return {
				username:'',
				oldpsd:'',
				newpsd:''
			};
		},
		onLoad(option){
			console.log(option.info)
			var info = JSON.parse(option.info)
			this.username = info.username
			this.oldpsd = info.password
			
		},
		methods:{
			goback(){
				uni.navigateBack({
				    delta: 1
				});
			},
			modify(){
				updatePwd({
					username:this.username,
					oldpsd:this.oldpsd,
					newpsd:this.newpsd
				})
				.then(res=>{
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login{
		.topbar{
			position: fixed;
			left: 0;
			top: 0;
			background-color: #354e44;
			color: #fff;
			width: 100%;
			height: 44px;
			line-height: 44px;
			text-align: center;
			z-index: 998;
			.back{
				font-size: 24px;
				position: absolute;
				left: 20px;
			}
		}
		.content{
			margin-top: 44px;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
			.main{
			    display: flex;
			    flex-direction: column;
			    padding-left: 35px;
			    padding-right: 35px;
				view{
					border: none;
				    border-radius: 2.5rem;
				    box-shadow: 0 0 30px 0 rgba(43,86,112,.1);
				}
				.name,
				.oldpsd,
				.newpsd{
					display: flex;
				    flex-direction: row;
				    justify-content: space-between;
				    align-items: center;
				    height: 18px;
				    color: #333333;
				    padding: 16px;
				    margin-top: 12px;
				    margin-bottom: 12px;
					input{
					    flex: 1;
					    text-align: left;
					    font-size: 14px;
					    padding-right: 5px;
					    margin-left: 10px;
						display: block;
					    font-size: 16px;
					    line-height: 1.4em;
					    height: 1.4em;
					    min-height: 1.4em;
					    overflow: hidden;
						color: #333333;
					}
				}
			}
			button{
			    background: rgb(53, 78, 68);
			    color: rgb(255, 255, 255);
				border-radius: 2.5rem;
				box-shadow: 0 0 30px 0 rgba(0,0,0,.2);
				transition: all 0.4s;
			    font-size: 15px;
			    width: 300px;
			    height: 50px;
			    line-height: 50px;
			    text-align: center;
			    margin-left: auto;
			    margin-right: auto;
			    margin-top: 48px;
			    overflow: hidden;
				position: relative;
				display: block;
			    padding-left: 14px;
			    padding-right: 14px;
			    box-sizing: border-box;
			}
		}
	}
</style>
